.admin-preinstalled-apps {
  @extend %standard-form;

  .save {
    @extend %button-base;
    @extend %button-primary;
    margin-left: 10px;
  }

  .productivity-suite, .system-suite {
    margin-bottom: 40px;
  }

  .toggle-more {
    color: #888888;

    button {
      @include unstyled-button();
    }
  }

  i.icon-down, i.icon-up {
    transform: scale(.7, 1); // Fix the scaling of the icon to look a little better
  }

  [role=grid] {
    [role=row] {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      border-top: 1px solid $default-table-border-color;
      flex-basis: 0;
      width: 100%;

      &.checked, &.toggle-more {
        background-color: white;
        [role=row] {
          border-top: 1px solid $default-content-background-color;
        }
      }

      &.toggle-more {
        cursor: pointer;
        div {
          margin-left: auto;
        }
      }

      [role=gridcell] {
        padding: 4px;
        overflow: hidden;
        @include overflow-ellipsis();
        flex-grow: 0;
        &.name {
          width: 20%;
        }
        &.description {
          width: 70%;
          color: #888888;
        }
        &.download {
          width: 130px;
          color: #888888;
          i.download-checkmark {
            color: green;
            @extend .icon;
            @extend .icon-check;
            margin-right: 5px;
          }
          i.download-x-mark {
            color: red;
            @extend .icon;
            @extend .icon-plus;
            margin-right: 5px;
            -ms-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
          }
          progress {
            width: 115px;
            &::-webkit-progress-value {
              background-color: green;
            }
          }
        }
      }
    }
  }
}
